function compareResources()
{
	$.ajax({
		type: this.method,
		url: this.action,
		data: $(this).serialize(),
		dataType: 'json',
		success: showResults,
		error: function() { alert('Error while comparing resources!'); }
	});

	return false;
}

function showResults(json, textStatus)
{
	if (json.error) {
		alert(json.error);
		return;
	}

	$('#high_value').text(json.high);
	$('#low_value').text(json.low);
	$('#avg_value').text(json.avg);
	$('#num_exceptions').text(json.num_exceptions);

	createGraph(json.links);
	showDetails(json.links);
}

function createGraph(links)
{
	step = 0.005;

	range = 0.0;
	dist = {};
	simDist = [];
	while (range < 1) {
		dist[range] = 0
		for (i in links) {
			sim = links[i].similarity;
			if (sim >= range && sim < (range + step)) {
				dist[range]++;
			}
		}
		simDist.push([range, dist[range]]);
		range += step;
	}

	var options = {
		selection: { mode: 'x' },
		bars: {
			show: true,
			barWidth: 0.005
		}
	}

	var graph = $.plot($('#graph'), [simDist], options);
	
	var overview = $.plot($('#overview'), [simDist], {
		xaxis: { ticks: [] },
		yaxis: { ticks: [] },
		selection: { mode: "x" },
		bars: {
			show: true,
			barWidth: 0.005
		}
	});

	$("#graph").bind("plotselected", function (event, ranges) {
		// do the zooming
		plot = $.plot($("#graph"), [simDist],
		$.extend(true, {}, options, {
			xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to },
			yaxis: { min: 0, max: getMaxCount(simDist, ranges) + 2 }
		}));

		// don't fire event on the overview to prevent eternal loop
		overview.setSelection(ranges, true);
	});

	$("#overview").bind("plotselected", function (event, ranges) {
		plot.setSelection(ranges);
	});
}

function getMaxCount(simDist, ranges)
{
	min = ranges.xaxis.from;
	max = ranges.xaxis.to;

	var max_count = 0;

	for (i in simDist) {
		if (simDist[i][0] >= min && simDist[i][0] <= max) {
			if (max_count < simDist[i][1]) {
				max_count = simDist[i][1];
			}
		}
	}

	return max_count;
}

function showDetails(links)
{
	links.sort(function(a, b) { return b.similarity - a.similarity });
	var html = '<table><tr>' +
		   '<th>Source Resource</th>' +
		   '<th>Target Resource</th>' +
		   '<th colspan="2">Similarity (click row for details)</th>' +
		   '</tr>';
	for (i in links) {
		barWidth = (300 * links[i].similarity / 1) | 0;
		html += '<tr class="sim_row"><td style="width: 300px"><a href="' + links[i].src + '">' + links[i].src + '</a></td>' +
			'<td style="width: 300px;"><a href="' + links[i].dst + '">' + links[i].dst + '</a></td>' +
			'<td>' + links[i].similarity + '</td>' +
			'<td><div class="sim_container">' +
			'<div class="sim_bar" style="width: ' + barWidth + 'px;">.</div>' +
			'</div>' +
			'</td></tr>' +
			'<tr class="sim_details" style="display: none;"><td colspan="4"><pre>' + links[i].trace + '</pre></td></tr>';
	}
	html += '</table>';
	$('#similarity_details').html(html);

	$('.sim_row').click(function() { $(this).next().toggle(); });
}

function init()
{
	$('#compare_form').submit(compareResources);
	$('#ajax_indicator').ajaxStart(function(){ $(this).show(); });
	$('#ajax_indicator').ajaxStop(function(){ $(this).hide(); });
}

$(init);
